<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看导入的 excel</title>
    <style>
        h1 {
            text-align: center;
        }
        td, th {
            min-width: 50px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>查看导入的 excel</h1>
    <table border="1" cellspacing="0" style="margin: 0 auto;" id="table">
        <tr>
            <th>序号</th>
            <th>实施机构</th>
            <th>事项类别</th>
            <th>事项名称</th>
            <th>设定依据</th>
            <th>二级序号</th>
            <th>二级事项名称</th>
            <th>部门</th>
        </tr>
    </table>
    <script>
        window.onload = function () {
            let TT = document.getElementById("table");
            let TT_DefStr = `<tr>
                    <th>序号</th>
                    <th>实施机构</th>
                    <th>事项类别</th>
                    <th>事项名称</th>
                    <th>设定依据</th>
                    <th>二级序号</th>
                    <th>二级事项名称</th>
                    <th>部门</th>
                </tr>`;
            var myHeaders = new Headers();
            myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
            myHeaders.append("Content-Type", "application/json");

            var raw = JSON.stringify({
                "fileName": "888.xlsx"
            });

            var requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: raw,
                redirect: 'follow'
            };

            fetch("http://127.0.0.1:3000/upload_excel/downloadExcel", requestOptions)
                .then(response => response.json())
                .then(result => {
                    console.log('sssssssssssss', result);
                    let last_num = null;
                    let obj = {};
                    let newData = [];
                    for (let i = 0; i < result.data.length; i++) {
                        if (last_num != result.data[i].num) {
                            last_num = result.data[i].num;
                            if (JSON.stringify(obj) != '{}') {
                                newData.push(obj);
                            }
                            obj = result.data[i];
                            obj = {
                                num: result.data[i].num,
                                ImplementingInstitution: result.data[i].ImplementingInstitution,
                                ItemCategory: result.data[i].ItemCategory,
                                ItemName: result.data[i].ItemName,
                                Basis_for_Setting: result.data[i].Basis_for_Setting
                            };
                            obj.subItem = [
                                {
                                    "subNum": result.data[i].subNum,
                                    "subName": result.data[i].subItemName,
                                    "Department": result.data[i].Department
                                }
                            ];
                        } else {
                            obj.subItem.push({
                                "subNum": result.data[i].subNum,
                                "subName": result.data[i].subItemName,
                                "Department": result.data[i].Department
                            });
                        }
                    }
                    if (obj) {
                        newData.push(obj);
                    }

                    // 打印一下这个看看
                    console.log(newData);

                    let htmlStr = '';
                    for (let i = 0; i < newData.length; i++) {
                        let item = newData[i];
                        htmlStr += `<tr>
                            <td rowspan="${item.subItem.length}">${item.num || ''}</td>
                            <td rowspan="${item.subItem.length}">${item.ImplementingInstitution || ''}</td>
                            <td rowspan="${item.subItem.length}">${item.ItemCategory || ''}</td>
                            <td rowspan="${item.subItem.length}">${item.ItemName || ''}</td>
                            <td rowspan="${item.subItem.length}">${item.Basis_for_Setting || ''}</td>
                            <td>${item.subItem[0].subNum || ''}</td>
                            <td>${item.subItem[0].subName || ''}</td>
                            <td>${item.subItem[0].Department || ''}</td>
                        </tr>`;
                        for (let j = 1; j < item.subItem.length; j++) {
                            htmlStr += `<tr>
                                <td>${item.subItem[j].subNum || ''}</td>
                                <td>${item.subItem[j].subName || ''}</td>
                                <td>${item.subItem[j].Department || ''}</td>
                            </tr>`;
                        }
                    }
                    TT.innerHTML = TT_DefStr + htmlStr;
                })
                .catch(error => console.log('error', error));
        }
    </script>
</body>
</html>